<template>
  <div
    class="border-frame"
    :style="{
      width: width + 'px',
      height: height + 'px',
      position: 'relative'
    }"
  >
    <!-- 边框图片 -->
    <img
      :src="borderSrc"
      :alt="alt || '装饰边框'"
      class="border-image"
      :style="{
        width: '100%',
        height: '100%',
        position: 'absolute',
        top: 0,
        left: 0,
        zIndex: 1
      }"
    >

    <!-- 内容区域（边框内部） -->
    <div
      class="border-content"
      :style="{
        position: 'absolute',
        top: padding + 'px',
        left: padding + 'px',
        right: padding + 'px',
        bottom: padding + 'px',
        zIndex: 2,
        overflow: 'hidden'
      }"
    >
      <slot></slot>
    </div>
  </div>
</template>

<script setup>
const props = defineProps({
  // 边框图片路径
  src: {
    type: String,
    required: true
  },
  // 宽度（设计稿尺寸）
  width: {
    type: Number,
    default: 400
  },
  // 高度（设计稿尺寸）
  height: {
    type: Number,
    default: 300
  },
  // 内边距（内容距离边框的距离）
  padding: {
    type: Number,
    default: 20
  },
  // alt 文本
  alt: {
    type: String,
    default: ''
  }
})

// 计算边框图片路径
const borderSrc = computed(() => {
  return props.src
})
</script>

<style scoped>
.border-frame {
  /* 容器本身不设置其他样式，由父组件控制位置 */
}

.border-image {
  /* 边框图片样式 */
  object-fit: contain; /* 保持图片比例，完整显示 */
  pointer-events: none; /* 防止边框图片阻挡内容交互 */
}

.border-content {
  /* 内容区域样式 */
  /* 可以在这里添加默认样式 */
}
</style>
